<template>
	<view v-if="show" class="xl-back-top" 
		:style="{'--size': $xl.calcUnit(size, 'rpx'), bottom: $xl.calcUnit(bottom, 'rpx'), right: $xl.calcUnit(right, 'rpx'), borderRadius: type=='circle' ? '100rpx' : '8rpx'}" 
		@click="backTop">
		<xl-icon :name="icon" size="17" :color="color" ></xl-icon>
		<view v-if="text" class="tip">{{text}}</view>
	</view>
</template>

<script setup>
	import { ref, computed, watch } from 'vue'
	import { onPageScroll } from "@dcloudio/uni-app";
	
	import propsData from './props.js'
	const props = defineProps(propsData)
	const emits = defineEmits(['click'])
	
	const show = ref(false)
	
	onPageScroll(e => {
		if(e.scrollTop > props.showTop) show.value = true
		else show.value = false
	})
	
	function backTop(){
		uni.pageScrollTo({
			scrollTop: 0,
			duration: props.duration
		});
		emits('click')
	}
</script>

<style lang="scss" scoped>
	.xl-back-top{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: v-bind(background);
		position: fixed;
		width: var(--size);
		height: var(--size);
		z-index: v-bind(zIndex);
		.tip{
			font-size: 18rpx;
			color: v-bind(color);
		}
	}
</style>